<script setup lang="ts">
import { onMounted, ref } from 'vue'
import EntryFooterTags from './entryFooterTags.vue'
import SvgIcon from './SvgIcon.vue'
import { getListItem } from '@/service/JuejinEntryListService'
// import { getAssetsFile } from '@/utils/getAssetsFile'

export interface ListItem {
  maintitle: string
  mainabstract: string
  username: string
  look: string
  good: string
  tags: Array<string>
  imgUrl?: string | undefined
}

const ListItem = ref<ListItem[]>()
onMounted(async () => {
  // dataActList.value = []
  ListItem.value = await getListItem()
})
</script>
<template>
  <ul class="entry-list">
    <li class="list-item" v-for="item in ListItem" :key="item.maintitle">
      <div class="content-wrapper">
        <div
          class="content-main"
          :style="item.imgUrl ? { maxWidth: '80%' } : { maxWidth: '100%' }"
        >
          <div class="content-main-title">
            <h3 :title="item.maintitle">{{ item.maintitle }}</h3>
          </div>
          <div class="content-main-abstract">
            <span>
              {{ item.mainabstract }}
            </span>
          </div>
          <div class="entry-footer">
            <ul class="entry-footer-inner">
              <li class="item meta-container">
                <a href="#">{{ item.username }}</a>
                <div class="footer-divider"></div>
              </li>
              <li class="item view">
                <SvgIcon name="LookSvg" size="16px" />
                <span>{{ item.look }}</span>
              </li>
              <li class="item like">
                <div class="liked-wrap">
                  <SvgIcon name="GoodSvg" size="14px" />
                </div>
                <span>{{ item.good }}</span>
              </li>
            </ul>
            <EntryFooterTags :tags="item.tags" />
          </div>
        </div>
        <img
          :src="item.imgUrl"
          :alt="item.maintitle"
          v-if="item.imgUrl != null"
        />
      </div>
    </li>
  </ul>
</template>

<style lang="scss" scoped>
img {
  object-fit: cover;
  object-position: center;
  overflow: clip;
}
</style>
